<template>
	<el-dialog
	  v-model="dialogVisible"
	  title="调整图层位置"
	  width="30%"
	  :before-close="handleClose"
	>
	     <el-tree
			ref="layerTreeRef"
	       :data="TreeData"
		   :props="props"
	       show-checkbox
	       node-key="id"
		   :check-strictly="true"
		   :default-checked-keys="defaultCheckedKeys"
		   :default-expanded-keys="defaultCheckedKeys"
		    @check="onNodeCheck"
	     />
	   
	  
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="dialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="save">
	        确定
	      </el-button>
	    </span>
	  </template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { ElMessageBox } from 'element-plus'
	import { LoadTree,updateActor,updateLayer} from "@/api/scene";
	const dialogVisible = ref(false)

	const handleClose = (done: () => void) => {
	  ElMessageBox.confirm('Are you sure to close this dialog?')
		.then(() => {
		  done()
		})
		.catch(() => {
		})
	}

	const props = {
	  value: 'id',
	  label: 'label',
	  children: 'children',
	}

	const TreeData=ref([]);
	const layerTreeRef= ref()
	const defaultCheckedKeys=ref([]);
	
	const GetTree=(id:string)=>{
		LoadTree({
			"pid":"-1",
			"sceneid":""
		})
		.then((res) => {
			if(res.code==200){
				TreeData.value=res.result
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
			TreeData.value=[];
		})
		.finally(() => {
		});
	}
	
	
	const onNodeCheck=(data,info)=>{
		console.log(data);
		if(cur_node.value.id==data.id){
			layerTreeRef.value!.setChecked(data.id,false);
			return;
		}
		console.log(data);
		if(info!=null && info.checkedKeys && info.checkedKeys.length>0){
			for(var id of info.checkedKeys){
				if(id!=data.id)layerTreeRef.value!.setChecked(id,false);
			}
		}
		cur_checked_key.value=data.id
	}


	const cur_node=ref({});
	const cur_checked_key=ref('');
	
	
	const show=(node:object)=>{
		cur_node.value=node;
		
		cur_checked_key.value=node.pid
		defaultCheckedKeys.value=[];
		dialogVisible.value=true;
		defaultCheckedKeys.value.push(node.pid);
		GetTree(node.pid);
		
	}
	
	
	const save=()=>{
		dialogVisible.value=false;
		if(cur_node.type=='Actor'){
			updateActor({
				"id":cur_node.value.id,
				"layer_id":cur_checked_key.value,
			})
			.then((res) => {
				if(res.code==200){
					ElMessage.success(res.message || '成功.');
				}else{
					ElMessage.error(res.message || '系统出错');
				}
			})
			.catch((e) => {
			})
			.finally(() => {
				onClosed(cur_node);
			});
		}else{
			updateLayer({
				"id":cur_node.value.id,
				"pid":cur_checked_key.value,
			})
			.then((res) => {
				if(res.code==200){
					ElMessage.success(res.message || '成功.');
				}else{
					ElMessage.error(res.message || '系统出错');
				}
			})
			.catch((e) => {
			})
			.finally(() => {
				onClosed(cur_node);
			});
		}
		
	}
	
	const emits = defineEmits(['onClosed'])
	const onClosed=(e)=>{
		emits('onClosed', e)
	}
	
	onMounted(() => {
	});
	

	defineExpose({
	  show,
	});

</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>